//定义首页组件
var Home = React.createClass({
    //定义状态存储列表数据
    getInitialState:function () {
        return{
            firstList:[
                {
                    img:'img/sass-less.png',
                    h3:'Sass ',
                    p:'最流行的 CSS 扩展语言解析器<a href="#">Sass</a>是一个成熟、稳定、强大的 CSS 扩展语言解析器。'
                },
                {
                    img:'img/devices.png',
                    h3:'React',
                    p:'用于构建用户界面的 JavaScript 框架React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。'
                },
                {
                    img:'img/components.png',
                    h3:'Responsive Nav ',
                    p:'响应式导航（Responsive Nav）是一个很小的JS插件，压缩之后仅有1.7KB，能帮你创建针对小屏幕的可切换式导航'
                }
            ],
            //第二个列表数据
            secondList:[
                'img/01.png',
                'img/02.jpg',
                'img/03.png',
                'img/04.png'
            ]
        }
    },
    //渲染列表的方法
    createList:function (data) {
        return data.map(function (obj,index) {
            if(typeof obj === 'string'){
                return(
                    <li key={index}><img src={obj} />
                    </li>
                )
            }else{
                var content ={
                    __html:obj.p
                }
                return(
                    <li key={index}>
                        <img src={obj.img} />
                        <h3>{obj.h3}</h3>
                        <p dangerouslySetInnerHTML={content}></p>
                    </li>
                )
            }
        })
    },
    //渲染首页
    render:function () {
        return(
            <section className="home" style={{display:this.props.show}}>
                <div className="banner">
                    <div className="logo">B</div>
                    <h1>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h1>
                    <span className="btn btn-lg">下载Bootstrap</span>
                    <p>Bootstrap2中文文档(v2.3.2)</p>
                </div>

                <div className="first-list">
                    <div className="container">
                        <h1>Bootstrap相关优质项目推荐</h1>
                        <p>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p>
                        <div className="line"></div>
                        <ul className="clearfix">
                            {this.createList(this.state.firstList)}
                        </ul>
                        <div className="line"></div>
                        <p>本网站所列开源项目的中文版文档全部由Bootstrap中文网成员翻译整理，并全部遵循 CC BY 3.0协议发布。</p>
                        <span className="btn btn-lg">查看GitHub主页</span>
                    </div>
                </div>

                <div className="second-list">
                    <div className="container">
                        <h1>关于 Bootstrap 中文网</h1>
                        <p>Bootstrap中文网致力于前端开发推广，坚持分享、开放的互联网精神</p>
                        <div className="line"></div>
                        <ul className="clearfix">
                            {this.createList(this.state.secondList)}
                        </ul>
                        <div className="line"></div>
                        <p>Bootstrap中文网致力于前端开发推广，坚持分享、开放的互联网精神，旨在为广大前端攻城师、设计师提供交流的平台，如果你和我们有相同的目标，我们乐意一起携手前行。</p>
                        <span className="btn btn-lg">学一学Bootstrap</span>
                    </div>
                </div>
            </section>
        )
    }
})

module.exports = Home;